<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #box{
        position: relative;
        margin: 50px auto;
        width: 890px;
        height: 400px;
        overflow: hidden;
    }
    img{
        position: absolute;
    }
    span{
        position: absolute;
        display: block;
        width: 890px;
        height: 200px;
        background-color:transparent;
    }
    #upSpan{
        top: 0;
    }
    #downSpan{bottom: 0;

    }
</style>
<body>
    <div id="box">
        <img src="img/xy.jpg" alt="" id="img1">
        <span id="upSpan"></span>
          <span id="downSpan"></span>
    </div>
</body>
<script>
    var downSpan=document.getElementById('downSpan');
    var upSpan=document.getElementById('upSpan');
     var img=document.getElementById('img1');
    var count=0;
    var time=null;
    upSpan.onmouseover=function(){
        clearInterval(time);
        time=setInterval(
            function(){
                count-=3;
                count>=-934? img.style.top=count+'px':clearInterval(time);
            }
        ,30)
    };
    downSpan.onmouseover=function(){
        clearInterval(time);
        time=setInterval(
            function(){
                count-=3;
                count<0? img.style.top=count+'px':clearInterval(time);
            }
        ,30)
    };
    
</script>
</html>